ion-accordion {
    > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
        @include margin-horizontal(null, var(--mdl-spacing-2));
        background-color: var(--gray-100);
        border-radius: 50%;
        padding: var(--mdl-spacing-1);
    }

    /**
    * Change arrow direction to match LMS: expanded is down, collapsed is right.
    */
    &.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon,
    &.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
        transform: none;
    }

    &.accordion-collapsing > [slot="header"] .ion-accordion-toggle-icon,
    &.accordion-collapsed > [slot="header"] .ion-accordion-toggle-icon {
        transform: rotate(-90deg);
        @include rtl() {
            transform: rotate(90deg);
        }
    }

    &.accordion-expanded .hide_on_expand,
    &.accordion-expanding .hide_on_expand {
        visibility: hidden;
    }
}

ion-accordion-group.striped {
    ion-accordion:nth-child(odd) {
        --ion-item-background: var(--core-table-odd-cell-background);
    }

    ion-accordion:nth-child(even) {
        --ion-item-background: var(--core-table-even-cell-background);
    }

    ion-item.divider {
        --background: var(--ion-item-background);
    }

    hr {
        background-color: var(--stroke);
        height: 1px;
        margin: 0px var(-mdl-spacing-4);
    }
}

:root.dark {
    ion-accordion {
        > [slot="header"] .ion-accordion-toggle-icon[slot="start"] {
            background-color: var(--gray-800);
        }
    }
}
